import React, {Component} from 'react';
import '../assets/stylus/no_access.styl';
import tipLogo from '../assets/img/img_no_access.svg';
import {currentCirle, Circle} from '../showText';
import PropTypes from 'prop-types';


class NoAccess extends Component{
  constructor (props) {
    super(props);
    this.props = props;
    this.state = {
      time: 10
    };
  }

  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  componentDidMount () {
    this.init();
  }

  init () {

    window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;

    let canvas = document.getElementById('canvas');
    let ctx = canvas.getContext('2d');
    let w = canvas.width = canvas.offsetWidth;
    let h = canvas.height = canvas.offsetHeight;
    let circles = [];
    let current_circle = new currentCirle(0, 0)

    let draw = function () {
      ctx.clearRect(0, 0, w, h);
      for (let i = 0; i < circles.length; i++) {
        circles[i].move(w, h);
        circles[i].drawCircle(ctx);
        for (let j = i + 1; j < circles.length; j++) {
          circles[i].drawLine(ctx, circles[j])
        }
      }
      if (current_circle.x) {
        current_circle.drawCircle(ctx);
        for (var k = 1; k < circles.length; k++) {
          current_circle.drawLine(ctx, circles[k])
        }
      }
      requestAnimationFrame(draw)
    }

    let init = function (num) {
      for (var i = 0; i < num; i++) {
        circles.push(new Circle(Math.random() * w, Math.random() * h));
      }
      draw();
    }
    window.addEventListener('load', init(100));
    window.onmousemove = function (e) {
      e = e || window.event;
      current_circle.x = e.clientX;
      current_circle.y = e.clientY;
    }
    window.onmouseout = function () {
      current_circle.x = null;
      current_circle.y = null;

    };
  }

  goBack () {
    this.context.router.history.push('/home');
  }

  render () {
    const InfoDom = (
      <div className="infoWrap">
        <div className="access-box">
          <div className="access-logo"><img src={tipLogo} /></div>
          <div className="access-context">您访问的页面不存在请重试！</div>
        </div>
        <canvas className="login-bg" id="canvas"></canvas>
      </div>
    );
    return InfoDom;
  }
}

export default NoAccess;